{% extends "pos/base.html" %}
{% load static %}
{% block title %}Sales{% endblock %}

{% block stylesheets %}
<link href="{% static 'css/pagination_buttons.css' %}" rel="stylesheet">
<style>
  .filter-box .form-control,
  .filter-box .form-check-input { font-size: .85rem;}

  .sales-filter-card { border: 1px solid #e3e6ec; border-radius: 12px; }
  .sales-filter-body { padding: 18px 20px 16px; }
  .filter-group {
    border: 1.5px solid #e8eaee; border-radius: 10px;
    padding: 10px 12px 12px; background: #fbfcfd; height: 100%;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  }
  .filter-group.is-active {
    border-color: #2d5f8a; background: #f4f8fc;
    box-shadow: 0 0 0 3px rgba(45,95,138,.08);
  }
  .filter-group-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
  .filter-label { font-size: .7rem; font-weight: 700; color: #5c6470; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 0; }
  .filter-use { margin: 0; display: flex; align-items: center; }
  .filter-use .form-check-input { margin-top: 0; cursor: pointer; }
  .filter-use .form-check-label { font-size: .66rem; color: #9aa1ac; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; cursor: pointer; }
  .filter-group.is-active .filter-use .form-check-label { color: #2d5f8a; }
  .filter-date-row .form-control { font-size: .8rem; }
  .filter-apply-btn { background: linear-gradient(135deg, #1e3a5f 0%, #2d5f8a 100%); border: none; font-weight: 600; letter-spacing: .3px; }
  .filter-apply-btn:hover { opacity: .9; color: #fff; }
  .filter-reset-btn { border: 1.5px solid #e0e2e7; color: #666; font-weight: 500; }
  .filter-toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; margin-top: 4px; border-top: 1px dashed #e8eaee; }
  #filterCustomerSelect + .select2-container .select2-selection--single { height: calc(1.5em + .75rem + 2px); display: flex; align-items: center; border-color: #ced4da; }
  #filterCustomerSelect + .select2-container .select2-selection__arrow { height: 100%; }

/* ── Receipt Modal ── */
#receiptModal .modal-content {
  border: none;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
#receiptModal .modal-header {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5f8a 100%);
  border: none;
  padding: 14px 20px;
}
#receiptModal .modal-header .modal-title {
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
}
#receiptModal .modal-header .close {
  color: #fff; opacity: .8; text-shadow: none;
}
#receiptModal .modal-header .close:hover { opacity: 1; }
#receiptModal .modal-body { padding: 16px 20px 8px; }
#receiptModal .modal-footer {
  border-top: 1px solid #f0f0f0;
  padding: 10px 20px;
}

/* ── Action Pills (compact) ── */
.action-pills {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.action-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 50px;
  border: 1.5px solid #ddd;
  background: #fff;
  color: #666;
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s ease;
  outline: none;
}
.action-pill:hover { border-color: #2d5f8a; color: #2d5f8a; background: #f4f8fc; }
.action-pill.active { border-color: #2d5f8a; background: #2d5f8a; color: #fff; }
.action-pill i { font-size: .8rem; }

/* ── Category Row ── */
.tpl-cat { margin-bottom: 12px; }
.tpl-cat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.tpl-cat-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tpl-cat-name {
  font-size: .75rem;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.tpl-cat-count {
  font-size: .65rem;
  color: #aaa;
  margin-left: auto;
}

/* ── Template Chips (compact) ── */
.tpl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tpl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1.5px solid #e8e8e8;
  border-radius: 8px;
  background: #fafbfc;
  cursor: pointer;
  transition: all .15s ease;
  outline: none;
  white-space: nowrap;
}
.tpl-chip:hover {
  border-color: var(--chip-color, #2d5f8a);
  background: var(--chip-bg, #f0f5fa);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,.07);
}
.tpl-chip:active { transform: translateY(0); box-shadow: none; }
.tpl-chip .chip-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tpl-chip .chip-label {
  font-size: .78rem;
  font-weight: 600;
  color: #444;
}
.tpl-chip .chip-sub {
  font-size: .65rem;
  color: #aaa;
  font-weight: 400;
}

/* ── Shop Cards ── */
.shop-card-modal {
  border: 2px solid #dee2e6;
  border-radius: 10px;
  padding: 12px 15px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #fff;
  outline: none;
}
.shop-card-modal:hover {
  border-color: #2d5f8a;
  box-shadow: 0 2px 8px rgba(45,95,138,.15);
}
.shop-card-modal:focus {
  border-color: #2d5f8a;
  box-shadow: 0 0 0 3px rgba(45,95,138,.2);
}
.shop-card-modal.selected {
  border-color: #28a745;
  background: #f0fff4;
}
.shop-logo-sm {
  width: 50px; height: 50px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #eee;
}
.shop-logo-placeholder-sm {
  width: 50px; height: 50px;
  background: #f5f5f5;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #aaa; font-size: 1.2rem;
}

/* ── Responsive ── */
@media (max-width: 575.98px) {
  .action-pills { gap: 4px; }
  .action-pill { padding: 5px 10px; font-size: .74rem; }
  .tpl-chip { padding: 6px 10px; }
  .tpl-chip .chip-label { font-size: .74rem; }
}

/* ── Invoice Detail Popup ── */
#invoiceDetailModal .modal-content {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.22);
}
#invoiceDetailModal .modal-header {
  background: linear-gradient(135deg, #1a2f4a 0%, #2d5f8a 100%);
  border: none;
  padding: 14px 20px;
}
#invoiceDetailModal .modal-header .modal-title {
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .3px;
}
#invoiceDetailModal .modal-header .close { color: #fff; opacity:.8; text-shadow:none; }
#invoiceDetailModal .modal-header .close:hover { opacity:1; }
#invoiceDetailModal .modal-body {
  padding: 0;
  max-height: 78vh;
  overflow-y: auto;
}
/* ── Invoice Sheet inside popup ── */
.inv-sheet {
  background: #fff;
  padding: 20px 24px 12px;
  font-size: .82rem;
  color: #111;
}
/* Shop header */
.inv-shop-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a2f4a;
  line-height: 1.2;
}
.inv-shop-meta { font-size: .76rem; color: #555; margin-top: 1px; }
.inv-logo { width:56px; height:56px; object-fit:cover; border-radius:8px; border:1px solid #eee; }
.inv-logo-placeholder {
  width:56px; height:56px;
  background:#f2f4f7; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:#bbb; font-size:1.4rem;
}
/* Divider */
.inv-divider { border:none; border-top:2px solid #1a2f4a; margin: 10px 0; }
/* Title */
.inv-title {
  text-align:center;
  font-size:1rem;
  font-weight:700;
  letter-spacing:3px;
  color:#1a2f4a;
  margin-bottom:10px;
}
/* Bill to / meta grid */
.inv-meta-grid {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.inv-meta-left .inv-cust-name { font-weight:700; font-size:.9rem; color:#111; }
.inv-meta-left .inv-cust-addr { font-size:.76rem; color:#555; margin-top:2px; }
.inv-meta-right { min-width:170px; }
.inv-meta-right table { width:100%; font-size:.76rem; }
.inv-meta-right td { padding:2px 4px; color:#333; }
.inv-meta-right td:first-child { color:#777; white-space:nowrap; }
.inv-meta-right td:last-child { font-weight:600; text-align:right; }
/* Items table */
.inv-items-table {
  width:100%;
  border-collapse:collapse;
  font-size:.78rem;
  margin-bottom:6px;
}
.inv-items-table thead tr {
  background: #1a2f4a;
  color: #fff;
}
.inv-items-table thead th {
  padding: 6px 7px;
  font-weight:600;
  white-space:nowrap;
}
.inv-items-table tbody tr:nth-child(even) { background:#f8f9fb; }
.inv-items-table tbody tr:hover { background:#eef3f9; }
.inv-items-table tbody td { padding:5px 7px; border-bottom:1px solid #eee; }
.inv-items-table tfoot tr { background:#f0f4f8; font-weight:700; }
.inv-items-table tfoot td { padding:6px 7px; border-top:2px solid #1a2f4a; }
/* Summary box */
.inv-summary {
  display:flex;
  justify-content:flex-end;
  margin-top:8px;
}
.inv-summary-table { min-width:200px; font-size:.8rem; }
.inv-summary-table td { padding:3px 8px; color:#333; }
.inv-summary-table td:first-child { color:#666; }
.inv-summary-table td:last-child { text-align:right; font-weight:600; }
.inv-summary-table tr.inv-total-row td {
  background:#1a2f4a;
  color:#fff !important;
  font-weight:700;
  font-size:.85rem;
  padding:5px 8px;
}
/* Remarks */
.inv-remarks {
  font-size:.75rem;
  color:#666;
  font-style:italic;
  margin-top:8px;
  padding-top:6px;
  border-top:1px dashed #ddd;
}
/* Action bar inside modal footer */
.inv-action-bar {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  padding: 10px 16px;
  background:#f8f9fb;
  border-top:1px solid #eee;
}
.inv-action-bar .inv-inv-no-badge {
  font-size:.75rem;
  color:#888;
  margin-right:auto;
  font-weight:500;
}
/* Row cursor */
#dataTable tbody tr { cursor: pointer; }
#dataTable tbody tr:hover { background: #f0f5fa !important; }
/* Loading skeleton */
.inv-skeleton {
  padding:40px 24px;
  text-align:center;
  color:#aaa;
}
.inv-skeleton i { font-size:2rem; }



</style>
{% endblock %}

{% block heading %}Sales{% endblock %}

{% block content %}

<!-- ─────────────────────────────  FILTER BAR  ────────────────────────────── -->
<div class="card shadow-sm sales-filter-card mb-3">
  <div class="sales-filter-body">
    <form method="get" class="filter-box" id="salesFilterForm">
      <div class="row g-3 align-items-stretch">

        <!-- Invoice -->
        <div class="col-12 col-md-3">
          <div class="filter-group" data-filter-group="invoice">
            <div class="filter-group-top">
              <label class="filter-label" for="filterInvoiceInput">Search by Invoice</label>
              <div class="filter-use form-check form-check-inline">
                <input class="form-check-input" type="radio" name="filter" value="invoice"
                       id="fInvoice" {% if picked_filter == "invoice" %}checked{% endif %}>
                <label class="form-check-label" for="fInvoice">Use</label>
              </div>
            </div>
            <input type="text" id="filterInvoiceInput" name="invoice" value="{{ invoice_q }}"
                   class="form-control" placeholder="Invoice #" autocomplete="off">
          </div>
        </div>

        <!-- Customer -->
        <div class="col-12 col-md-3">
          <div class="filter-group" data-filter-group="customer">
            <div class="filter-group-top">
              <label class="filter-label" for="filterCustomerSelect">Search by Customer</label>
              <div class="filter-use form-check form-check-inline">
                <input class="form-check-input" type="radio" name="filter" value="customer"
                       id="fCustomer" {% if picked_filter == "customer" %}checked{% endif %}>
                <label class="form-check-label" for="fCustomer">Use</label>
              </div>
            </div>
            <select id="filterCustomerSelect" name="customer" class="form-control" style="width:100%;">
              {% if customer_q %}<option value="{{ customer_q }}" selected>{{ customer_q }}</option>{% endif %}
            </select>
          </div>
        </div>

        <!-- Date -->
        <div class="col-12 col-md-4">
          <div class="filter-group" data-filter-group="date">
            <div class="filter-group-top">
              <label class="filter-label d-block mb-0">Search by Date</label>
              <div class="filter-use form-check form-check-inline">
                <input class="form-check-input" type="radio" name="filter" value="date"
                       id="fDate" {% if picked_filter == "date" %}checked{% endif %}>
                <label class="form-check-label" for="fDate">Use</label>
              </div>
            </div>
            <div class="d-flex filter-date-row">
              <input type="date" id="filterDateFrom" name="date_from" value="{{ date_from_q }}" class="form-control me-1">
              <input type="date" id="filterDateTo"   name="date_to"   value="{{ date_to_q }}"   class="form-control">
            </div>
          </div>
        </div>

        <!-- Apply / Reset -->
        <div class="col-12 col-md-2 d-flex align-items-end">
          <div class="w-100">
            <button type="submit" class="btn btn-primary btn-sm w-100 filter-apply-btn">
              <i class="fas fa-search me-1"></i> Apply
            </button>
            <a href="{% url 'sales:sales_list' %}" class="btn btn-light btn-sm w-100 mt-2 filter-reset-btn">
              Reset
            </a>
          </div>
        </div>
      </div>

      <div class="filter-toolbar">
        <a href="{% url 'sales:sales_list' %}?filter=hold" class="btn btn-outline-warning btn-sm">
          <i class="fas fa-pause-circle me-1"></i> Hold Invoices
        </a>
        <a href="{% url 'sales:challan_list' %}" class="btn btn-outline-danger btn-sm">
          <i class="fas fa-file-alt me-1"></i> Load Sheet &amp; Challan
        </a>
        <a href="{% url 'sales:ss01' %}" class="btn btn-outline-warning btn-sm">
          <i class="fas fa-file-alt me-1"></i> Sale Stock Summary
        </a>
        <a href="{% url 'sales:delivery_page' %}" class="btn btn-outline-secondary btn-sm">
          <i class="fas fa-file-alt me-1"></i> Stock Issue
        </a>
      </div>
    </form>
  </div>
</div>

<!-- ───────────────────────  CREATE NEW SALE BUTTON  ─────────────────────── -->
<div class="row ml-0 mb-3">
  <a href="{% url 'sales:sales_add' %}">
    <button type="button" class="btn btn-success font-weight-bold">
      <i class="fas fa-plus mr-2"></i> Create new sale
    </button>
  </a>
</div>

<!-- ─────────────────────────────  TABLE  ────────────────────────────── -->
<div class="card shadow mb-4">
  <div class="card-header py-3">
    <h6 class="m-0 font-weight-bold text-primary">Sales</h6>
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-bordered table-hover" id="dataTable" width="100%" style="width:auto !important; white-space:nowrap;" cellspacing="0">
        <thead>
          <tr>
            <th style="width:5%">#</th>
            <th style="width:15%">Invoice #</th>
            <th style="width:20%">Date</th>
            <th style="width:20%">Time</th>
            <th style="width:25%">Customer</th>
            <th class="text-end" style="width:10%">Total</th>
            <th class="text-end" style="width:10%">Received</th>
            {% if fbr_enabled %}<th class="text-center" style="width:12%">FBR Inv #</th>{% endif %}
            <th class="text-center" style="width:15%">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for s in sales %}
          <tr {% if s.bill_status == 1 %}class="table-warning"{% endif %}>
            <td>{{ forloop.counter }}</td>
            <td><span class="inv-no">{{ s.description }}</span>{% if s.bill_status == 1 %} <span class="badge badge-warning">HOLD</span>{% endif %}</td>
            <td>{{ s.transaction_date }}</td>
            <td>{{ s.bill_time }}</td>
            <td>{{ s.party_descp }}</td>
            <td class="text-end">{{ s.total_amount|floatformat:2 }}</td>
            <td class="text-end">{{ s.amount_transaction|floatformat:2 }}</td>
            {% if fbr_enabled %}
            <td class="text-center">
              {% if s.fbr_fiscal_no %}
                <small class="text-success" style="font-size:.65rem; word-break:break-all;">
                  <i class="fas fa-check-circle mr-1"></i>{{ s.fbr_fiscal_no|truncatechars:20 }}
                </small>
              {% else %}
                <span class="badge badge-secondary">—</span>
              {% endif %}
            </td>
            {% endif %}
            <td class="text-center">
              {% if 'edit_sale_bill' in allowed_features %}
                {% if 'allow_bill_modify_after_day_close' in allowed_features %}
                  <a href="{% url 'sales:sales_edit' s.description %}" class="btn btn-warning btn-sm js-edit-btn" data-hold="{% if s.bill_status == 1 %}1{% else %}0{% endif %}" data-invoice="{{ s.description }}" data-tx="{% if s.transaction_type == 3 %}return{% else %}sale{% endif %}" data-cash="{% if s.category == 1 or s.category == 3 %}1{% else %}0{% endif %}" title="Edit">
                    <i class="fas fa-edit"></i>
                  </a>
                {% else %}
                  {% now "Y-m-d" as today %}
                  {% if s.transaction_date|date:"Y-m-d" == today %}
                    <a href="{% url 'sales:sales_edit' s.description %}" class="btn btn-warning btn-sm js-edit-btn" data-hold="{% if s.bill_status == 1 %}1{% else %}0{% endif %}" data-invoice="{{ s.description }}" data-tx="{% if s.transaction_type == 3 %}return{% else %}sale{% endif %}" data-cash="{% if s.category == 1 or s.category == 3 %}1{% else %}0{% endif %}" title="Edit">
                      <i class="fas fa-edit"></i>
                    </a>
                  {% endif %}
                {% endif %}
              {% endif %}
              {% if 'delete_sale_bill' in allowed_features %}
                {% if 'allow_bill_modify_after_day_close' in allowed_features %}
                  <a href="{% url 'sales:sales_delete' s.description %}"
                     class="btn btn-danger btn-sm"
                     onclick="return confirm('Delete invoice #{{ s.description }}?');"
                     title="Delete">
                    <i class="fas fa-trash"></i>
                  </a>
                {% else %}
                  {% now "Y-m-d" as today %}
                  {% if s.transaction_date|date:"Y-m-d" == today %}
                    <a href="{% url 'sales:sales_delete' s.description %}"
                       class="btn btn-danger btn-sm"
                       onclick="return confirm('Delete invoice #{{ s.description }}?');"
                       title="Delete">
                      <i class="fas fa-trash"></i>
                    </a>
                  {% endif %}
                {% endif %}
              {% endif %}
              <button type="button" class="btn btn-dark btn-sm btn-receipt"
                      data-invoice="{{ s.description }}" title="Receipt">
                <i class="fas fa-receipt"></i>
              </button>
              {% if fbr_enabled and not s.fbr_fiscal_no %}
              <button type="button" class="btn btn-sm btn-fbr-repost"
                      style="background:#1B5E20;color:#fff;border-color:#1B5E20;"
                      data-invoice="{{ s.description }}" title="Repost to FBR">
                <i class="fas fa-cloud-upload-alt"></i>
              </button>
              {% endif %}
              <a href="{% url 'sales:sales_convert_to_return' s.description %}"
                 class="btn btn-info btn-sm" title="Convert to Return">
                <i class="fas fa-undo"></i>
              </a>
              <button type="button" class="btn btn-sm wa-sales-btn"
                      style="background-color:#25D366; border-color:#25D366; color:#fff;"
                      data-invoice="{{ s.description }}"
                      data-customer="{{ s.party_descp }}"
                      data-date="{{ s.transaction_date }}"
                      data-amount="{{ s.total_amount }}"
                      data-received="{{ s.amount_transaction }}"
                      data-mobile="{{ s.customer_mobile }}"
                      title="Send WhatsApp">
                <i class="fab fa-whatsapp"></i>
              </button>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <div class="text-end mt-3">
      <span class="badge p-2" style="background:#01478f; color:#ffffff; font-size:1rem;">
        Grand&nbsp;Total:&nbsp;{{ grand_total|floatformat:2 }}
      </span>
    </div>
  </div>
</div>


<!-- ══════════════════  RECEIPT MODAL  ══════════════════ -->
<div class="modal fade" id="receiptModal" tabindex="-1" role="dialog"
     aria-labelledby="receiptModalLbl" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">

      <div class="modal-header">
        <h6 class="modal-title" id="receiptModalLbl">
          <i class="fas fa-receipt mr-2"></i>Print / Share Invoice
        </h6>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span style="color:#fff">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <input type="hidden" id="rm_invoice_no" value="">
        <input type="hidden" id="rm_selected_template" value="">
        <input type="hidden" id="rm_selected_shop" value="">

        <!-- ── Step 1: Templates (rendered by JS from TEMPLATE_CONFIG) ── -->
        <div id="step-templates">
          <div class="action-pills" id="rm_action_group">
            <button type="button" class="action-pill active" data-action="pdf">
              <i class="far fa-file-pdf"></i> PDF
            </button>
            <button type="button" class="action-pill" data-action="print">
              <i class="fas fa-print"></i> Print
            </button>
            <button type="button" class="action-pill" data-action="share">
              <i class="fas fa-share-alt"></i> Share
            </button>
            <button type="button" class="action-pill" data-action="download">
              <i class="fas fa-download"></i> Download
            </button>
          </div>
          <div id="tpl-container"></div>
        </div>

        <!-- ── Step 2: Shop Selection ── -->
        <div id="step-shops" style="display:none;">
          <div class="text-center mb-3">
            <i class="fas fa-store fa-2x text-primary mb-2"></i>
            <h5>Select Business Header</h5>
            <p class="text-muted small">Multiple headers found. Please select one for this invoice.</p>
          </div>
          <div class="text-center mb-3">
            <span class="badge badge-light p-2">
              <kbd>↑</kbd><kbd>↓</kbd> Navigate &nbsp;|&nbsp;
              <kbd>Enter</kbd> Print &nbsp;|&nbsp;
              <kbd>Esc</kbd> Back
            </span>
          </div>
          <div id="shop-cards-container" class="px-2"></div>
          <div class="text-center mt-3">
            <button type="button" class="btn btn-secondary btn-sm" id="btn-back-to-templates">
              <i class="fas fa-arrow-left mr-1"></i> Back
            </button>
          </div>
        </div>

        <!-- ── Loading ── -->
        <div id="step-loading" style="display:none;" class="text-center py-4">
          <i class="fas fa-spinner fa-spin fa-2x text-primary mb-2"></i>
          <p class="text-muted">Loading...</p>
        </div>
      </div>

      <div class="modal-footer">
        <small class="text-muted mr-auto" id="modal-hint-text">Choose an action, then click a template.</small>
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
      </div>

    </div>
  </div>
</div>

<div class="modal fade" id="holdDecisionModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-sm modal-dialog-centered"><div class="modal-content">
    <div class="modal-header py-2"><h6 class="modal-title">Invoice on HOLD</h6>
      <button type="button" class="close" data-dismiss="modal">&times;</button></div>
    <div class="modal-body text-center">
      <p class="mb-3 small text-muted">Ye invoice hold par hai. Kya karna hai?</p>
      <a href="#" id="hdEditBtn" class="btn btn-warning btn-block mb-2"><i class="fas fa-edit mr-1"></i>Edit Invoice</a>
      <button type="button" id="hdIssueBtn" class="btn btn-success btn-block"><i class="fas fa-dolly mr-1"></i>Issue Stock</button>
    </div>
  </div></div>
</div>

<div class="modal fade" id="holdIssueModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg modal-dialog-centered"><div class="modal-content">
    <div class="modal-header py-2"><h6 class="modal-title">Issue Stock</h6>
      <button type="button" class="close" data-dismiss="modal">&times;</button></div>
    <div class="modal-body" id="holdIssueModalBody">
      <div class="text-center text-muted py-4">Loading…</div></div>
  </div></div>
</div>

<!-- ══════  INVOICE DETAIL POPUP  ══════ -->
<div class="modal fade" id="invoiceDetailModal" tabindex="-1" role="dialog"
     aria-labelledby="invDetailLbl" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" role="document">
    <div class="modal-content">
 
      <!-- Header -->
      <div class="modal-header">
        <h6 class="modal-title" id="invDetailLbl">
          <i class="fas fa-file-invoice mr-2"></i>
          Invoice Detail — <span id="idm-inv-no-title">#</span>
        </h6>
        <div class="btn-group btn-group-sm">
          <button type="button" class="btn btn-info btn-sm dropdown-toggle" data-toggle="dropdown">
            <i class="fas fa-truck mr-1"></i> Delivery Challan
          </button>
          <div class="dropdown-menu">
            <a class="dropdown-item idm-challan" data-size="80mm" href="#">80mm Thermal</a>
            <a class="dropdown-item idm-challan" data-size="a5" href="#">A5</a>
            <a class="dropdown-item idm-challan" data-size="a4" href="#">A4</a>
          </div>
        </div>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span>&times;</span>
        </button>
      </div>
 
      <!-- Body: invoice sheet -->
      <div class="modal-body" id="idm-body">
        <div class="inv-skeleton">
          <i class="fas fa-spinner fa-spin text-primary"></i>
          <p class="mt-2 small">Loading invoice…</p>
        </div>
      </div>
 
      <!-- Footer: action buttons -->
      <div class="inv-action-bar" id="idm-action-bar" style="display:none;">
        <span class="inv-inv-no-badge">Invoice <strong id="idm-inv-no-badge">#</strong></span>
 
        <!-- Edit -->
        <a href="#" id="idm-btn-edit" class="btn btn-warning btn-sm">
          <i class="fas fa-edit mr-1"></i> Edit
        </a>
 
        <!-- Delete -->
        <a href="#" id="idm-btn-delete" class="btn btn-danger btn-sm"
           onclick="return confirm('Delete this invoice?');">
          <i class="fas fa-trash mr-1"></i> Delete
        </a>
 
        <!-- Reprint -->
        <button type="button" id="idm-btn-reprint" class="btn btn-dark btn-sm">
          <i class="fas fa-print mr-1"></i> Reprint
        </button>
 
        <!-- Close -->
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">
          Close
        </button>
      </div>
 
    </div>
  </div>
</div>


{% endblock %}

{% block javascripts %}
<script>
  // $(function(){ $('#dataTable').DataTable({ "order": [[2,'desc']] }); });
  $(function(){
  $('#dataTable').DataTable({
    "order": [[2,'desc']],
    "autoWidth": true,
    "scrollX": true
  });
});


// ╔══════════════════════════════════════════════════════════════╗
// ║  FILTER BAR: select2 customer search + auto-active-filter    ║
// ╚══════════════════════════════════════════════════════════════╝
$(function () {

  function refreshActiveGroupStyle() {
    var val = $('input[name="filter"]:checked').val();
    $('.filter-group').removeClass('is-active');
    if (val) $('.filter-group[data-filter-group="' + val + '"]').addClass('is-active');
  }

  function setActiveFilter(val) {
    var $target = $('input[name="filter"][value="' + val + '"]');
    if ($target.length && !$target.prop('checked')) {
      $('input[name="filter"]').prop('checked', false);
      $target.prop('checked', true);
    }
    refreshActiveGroupStyle();
  }

  $('#filterCustomerSelect').select2({
    theme: 'bootstrap4',
    width: '100%',
    placeholder: 'Type customer name…',
    minimumInputLength: 1,
    allowClear: true,
    tags: true,
    ajax: {
      url: "{% url 'sales:ajax_customer_name_search' %}",
      dataType: 'json',
      delay: 250,
      data: function (params) { return { q: params.term }; },
      processResults: function (data) { return { results: data.results || [] }; },
      cache: true
    },
    language: {
      noResults: function () { return 'No match — press Enter to search this text anyway'; },
      searching: function () { return 'Searching…'; }
    }
  })
  .on('select2:open', function () {
    setActiveFilter('customer');
    setTimeout(function () {
      var f = document.querySelector('.select2-container--open .select2-search__field');
      if (f) f.focus();
    }, 0);
  })
  .on('select2:select select2:unselect select2:clear', function () {
    setActiveFilter('customer');
  });

  $('#filterInvoiceInput').on('focus input', function () { setActiveFilter('invoice'); });
  $('#filterDateFrom, #filterDateTo').on('focus input', function () { setActiveFilter('date'); });

  $('input[name="filter"]').on('change', refreshActiveGroupStyle);
  refreshActiveGroupStyle();
});

const TEMPLATE_CONFIG = [
  {
    key: 'a4',
    name: 'A4 — Full Page',
    color: '#2d5f8a',
    templates: [
      { id: 'a1', label: 'Type 1', sub: 'Standard' },
      { id: 'a2', label: 'Type 2', sub: 'Dist'     },
      { id: 'a3', label: 'Type 3'                  },
      { id: 'a4', label: 'Type 4'                  },
      { id: 'a5', label: 'Type 5'                  },
      { id: 'distribution_1', label: 'Type 6', sub:"Dist"       },
    ]
  },

  {% if pos_type == "medical_distribution" %}
  {
    key: 'med_disct',
    name: 'A4 - Medical Distribution',
    color: '#FF0000',
    templates: [
      { id: 'expiry',            label: 'Expiry',        sub: 'Batch Wise' },
      { id: 'secret_expiry',     label: 'Secret Expiry'                    },
      { id: 'secret_expiry_t_2', label: 'Secret Expiry (T2)'               },
    ]
  },
  {% endif %}

  {
    key: 'a5',
    name: 'A5 — Half Page',
    color: '#e67e22',
    templates: [
      { id: 'b1', label: 'Type 1'                     },
      { id: 'b2', label: 'Type 2'                     },
      { id: 'b3', label: 'Type 3', sub: 'Distribution' },
      { id: 'b4', label: 'Type 4'                     },
      { id: 'list_rate_b5', label: 'Type 5',sub:'List Rate'},
      { id: 'b5', label: 'Type 6',sub:'Urdu'},
      { id: 'b6', label: 'Type 7',sub:'Tax Invoice'},
    ]
  },

  {
    key: 'thermal',
    name: 'Thermal — POS Receipt',
    color: '#27ae60',
    templates: [
      { id: 't1', label: '80 mm (T1)', sub: 'Receipt' },
      { id: 't2', label: '80 mm (T2)', sub: 'Receipt' },
      { id: 't3', label: '80 mm (T3)', sub: 'Urdu' },
      { id: 't4', label: '80 mm (T4)', sub: 'Bags' },
      { id: 't5', label: '80 mm (T5)', sub: 'MRP' },
    ]
  },
];


/* ── Auto-render all categories & chips from config ── */
function renderTemplateGrid() {
  const box = document.getElementById('tpl-container');
  box.innerHTML = '';

  TEMPLATE_CONFIG.forEach(cat => {
    const sec = document.createElement('div');
    sec.className = 'tpl-cat';

    sec.innerHTML =
      `<div class="tpl-cat-head">
         <span class="tpl-cat-dot" style="background:${cat.color}"></span>
         <span class="tpl-cat-name">${cat.name}</span>
         <span class="tpl-cat-count">${cat.templates.length}</span>
       </div>`;

    const row = document.createElement('div');
    row.className = 'tpl-chips';

    cat.templates.forEach(t => {
      const b = document.createElement('button');
      b.type = 'button';
      b.className = 'tpl-chip rm-template-item';
      b.dataset.templateId = t.id;
      b.style.setProperty('--chip-color', cat.color);
      b.style.setProperty('--chip-bg', cat.color + '14');
      b.innerHTML =
        `<span class="chip-label">${t.label}</span>` +
        (t.sub ? `<span class="chip-sub">${t.sub}</span>` : '');
      row.appendChild(b);
    });

    sec.appendChild(row);
    box.appendChild(sec);
  });
}
renderTemplateGrid();

let currentShopIndex = 0, shopsList = [], selectedShopId = null;

$(document).on('click', '.btn-receipt', function(){
  $('#rm_invoice_no').val($(this).data('invoice') || '');
  $('#rm_selected_template, #rm_selected_shop').val('');
  showTemplateStep();
  $('#rm_action_group .action-pill').removeClass('active');
  $('#rm_action_group .action-pill[data-action="pdf"]').addClass('active');
  $('#receiptModal').modal('show');
});

$(document).on('click', '.action-pill', function(){
  $('#rm_action_group .action-pill').removeClass('active');
  $(this).addClass('active');
});

function getSelectedAction(){
  return $('#rm_action_group .action-pill.active').data('action') || 'pdf';
}

function showTemplateStep(){ $('#step-templates').show(); $('#step-shops, #step-loading').hide(); $('#modal-hint-text').text('Choose an action, then click a template.'); }
function showShopStep()    { $('#step-shops').show(); $('#step-templates, #step-loading').hide(); $('#modal-hint-text').text('Select a business header, then press Enter or click.'); }
function showLoading()     { $('#step-loading').show(); $('#step-templates, #step-shops').hide(); }

$('#btn-back-to-templates').on('click', showTemplateStep);

function buildViewUrl(tplId, invNo, shopId){
  let u = `/invoices/invoice-templates/${tplId}/${encodeURIComponent(invNo)}/sale/`;
  if (shopId) u += `${shopId}/`;
  return u;
}

// Shop cards
function renderShopCards(shops){
  shopsList = shops; currentShopIndex = 0;
  selectedShopId = shops.length ? shops[0].pk : null;
  const c = $('#shop-cards-container').empty();
  shops.forEach((s,i) => {
    const logo = s.logo_url
      ? `<img src="${s.logo_url}" class="shop-logo-sm" alt="">`
      : `<div class="shop-logo-placeholder-sm"><i class="fas fa-store"></i></div>`;
    const sel = i===0;
    c.append(`
      <div class="shop-card-modal d-flex align-items-center ${sel?'selected':''}"
           data-shop-id="${s.pk}" data-index="${i}" tabindex="${i+1}"
           onclick="selectShopInModal(${s.pk});proceedWithSelectedShop();"
           onkeydown="handleShopKeydown(event,${s.pk})">
        <div class="mr-3">${logo}</div>
        <div class="flex-grow-1">
          <h6 class="mb-0">${s.shop_name||'Unnamed Shop'}</h6>
          <small class="text-muted">${s.address||''}</small>
        </div>
        <div>
          <i class="fas fa-check-circle text-success" style="display:${sel?'inline':'none'}"></i>
          <i class="far fa-circle text-muted" style="display:${sel?'none':'inline'}"></i>
        </div>
      </div>`);
  });
  setTimeout(()=>c.find('.shop-card-modal').first().focus(),100);
}

function selectShopInModal(id){
  selectedShopId = id;
  $('.shop-card-modal').each(function(){
    const match = parseInt($(this).data('shop-id'))===id;
    $(this).toggleClass('selected', match);
    $(this).find('.fa-check-circle').toggle(match);
    $(this).find('.fa-circle').toggle(!match);
    if(match){ currentShopIndex=parseInt($(this).data('index')); $(this).focus(); }
  });
  $('#rm_selected_shop').val(id);
}
function selectShopByIndex(i){ if(i>=0&&i<shopsList.length){ currentShopIndex=i; selectShopInModal(shopsList[i].pk); }}

function handleShopKeydown(e,id){
  const n=shopsList.length;
  switch(e.key){
    case'Enter':
      e.preventDefault();
      e.stopPropagation();          // double tab bug fix
      selectShopInModal(id);
      proceedWithSelectedShop();    // Enter se bhi kaam kare
      break;
    case'ArrowUp':e.preventDefault();selectShopByIndex((currentShopIndex-1+n)%n);break;
    case'ArrowDown':e.preventDefault();selectShopByIndex((currentShopIndex+1)%n);break;
    case'Escape':e.preventDefault();showTemplateStep();break;
  }
}
$(document).on('keydown',function(e){
  if($('#step-shops').is(':hidden'))return;
  if(['INPUT','TEXTAREA'].includes(document.activeElement.tagName))return;
  const n=shopsList.length;
  switch(e.key){
    case'Enter':e.preventDefault();proceedWithSelectedShop();break;
    case'ArrowUp':e.preventDefault();selectShopByIndex((currentShopIndex-1+n)%n);break;
    case'ArrowDown':e.preventDefault();selectShopByIndex((currentShopIndex+1)%n);break;
    case'Escape':e.preventDefault();showTemplateStep();break;
  }
});

async function proceedWithSelectedShop(){
  const t=$('#rm_selected_template').val(), inv=$('#rm_invoice_no').val(), a=getSelectedAction();
  if(!selectedShopId||!t||!inv){alert('Please select a business header.');return;}
  await runReceiptAction(t,inv,a,selectedShopId);
  $('#receiptModal').modal('hide');
}

// Template click
$(document).on('click','.rm-template-item',async function(){
  const inv=$('#rm_invoice_no').val(), tpl=$(this).data('template-id'), act=getSelectedAction();
  if(!inv||!tpl||!act)return;
  $('#rm_selected_template').val(tpl);
  showLoading();
  try{
    const r=await fetch(`/invoices/select-shop/${tpl}/${encodeURIComponent(inv)}/sale/`,
      {credentials:'same-origin',headers:{'X-Requested-With':'XMLHttpRequest'}});
    const d=await r.json();
    if(d.multiple){renderShopCards(d.shops);showShopStep();}
    else{
      await runReceiptAction(tpl,inv,act,d.shops&&d.shops.length?d.shops[0].pk:null);
      $('#receiptModal').modal('hide');
    }
  }catch(err){
    console.error(err);
    await runReceiptAction(tpl,inv,act,null);
    $('#receiptModal').modal('hide');
  }
});

// Action runner
async function runReceiptAction(tpl,inv,action,shopId){
  const base=buildViewUrl(tpl,inv,shopId);
  if(action==='pdf'){window.open(base,'_blank');return;}
  if(action==='print'){window.open(base+'?autoprint=1&close=afterprint','_blank');return;}
  if(action==='download'){window.open(base+'?download=1','_blank');return;}
  if(action==='share'){
    try{
      const r=await fetch(base+'?pdf=1',{credentials:'same-origin',cache:'no-store'});
      if(!r.ok)throw 0;
      const blob=await r.blob();
      const file=new File([blob],`invoice-${inv}.pdf`,{type:'application/pdf'});
      const sec=window.isSecureContext||/^https:$/i.test(location.protocol)||/^(localhost|127\.0\.0\.1)$/i.test(location.hostname);
      if(sec&&navigator.canShare&&navigator.canShare({files:[file]})){
        await navigator.share({files:[file],title:`Invoice #${inv}`,text:'Please find attached invoice.'});
      }else{
        const w=window.open(URL.createObjectURL(file),'_blank');
        if(!w)window.open(base+'?download=1','_blank');
      }
    }catch(e){window.open(base+'?download=1','_blank');}
  }
}


/* ════════════════════════════════════════════════════════════════
   WHATSAPP
   ════════════════════════════════════════════════════════════════ */
const WA_SIGNATURE=`

━━━━━━━━━━━━━━━
_Automated Message from Blue Primes Software (blueprimes.com)_`;

document.querySelectorAll('.wa-sales-btn').forEach(btn=>{
  btn.addEventListener('click',async function(){
    const orig=this.innerHTML;
    const inv=this.dataset.invoice||'', cust=this.dataset.customer||'Customer',
          dt=this.dataset.date||new Date().toLocaleDateString('en-GB'),
          amt=this.dataset.amount||'0';
    let mob=this.dataset.mobile||'';
    if(!mob||!mob.trim()){alert('Customer mobile number not available!');return;}
    let ph=String(mob).trim().replace(/[\s\-\+]/g,'');
    if(ph.startsWith('0'))ph='92'+ph.substring(1);

    this.disabled=true; this.innerHTML='<i class="fas fa-spinner fa-spin"></i>';
    try{
      let tpl='';
      try{
        const tr=await fetch("{% url 'pos:whatsapp_template_get_default' 'sales' %}",
          {method:'GET',credentials:'same-origin',headers:{'X-Requested-With':'XMLHttpRequest'}});
        const td=await tr.json();
        tpl=(td.ok&&td.template_text)?td.template_text:getFallbackSalesTemplate();
      }catch(e){tpl=getFallbackSalesTemplate();}

      let msg=tpl
        .split('{customer_name}').join(cust).split('{invoice_no}').join(inv)
        .split('{date}').join(dt).split('{amount}').join(amt)
        .split('{balance}').join('').split('{remaining}').join(amt)
        .split('{mobile}').join(mob).split('{address}').join('').split('{remarks}').join('');
      msg+=WA_SIGNATURE;

      const fd=new FormData(); fd.append('phone',ph); fd.append('message',msg);
      const wr=await fetch('http://localhost:3000/api/send-media',{method:'POST',body:fd});
      const wd=await wr.json();
      if(wd.success){
        this.style.backgroundColor='#128C7E';
        this.innerHTML='<i class="fas fa-check"></i>';
        setTimeout(()=>{this.style.backgroundColor='#25D366';this.innerHTML=orig;},2000);
      }else{alert('WhatsApp failed: '+(wd.error||'Unknown'));this.innerHTML=orig;}
    }catch(err){console.error(err);alert('WhatsApp server not reachable.');this.innerHTML=orig;}
    finally{this.disabled=false;}
  });
});

function getFallbackSalesTemplate(){
  return `*{customer_name}*

📝 Invoice# {invoice_no}
💰 Amount: Rs. {amount}
📅 Date: {date}

Thank you for your business! 🙏`;
}





/* ════════════════════════════════════════════════════════════════
   INVOICE DETAIL POPUP — double-click on any table row
   ════════════════════════════════════════════════════════════════ */
 
// Helpers
function _fmtMoney(v){ return parseFloat(v||0).toLocaleString('en-PK', {minimumFractionDigits:2, maximumFractionDigits:2}); }
function _fmtQty(v){   return parseFloat(v||0) % 1 === 0 ? parseInt(v||0) : parseFloat(v||0).toFixed(2); }
 
// Build the invoice HTML from JSON data (same structure as buil_main_invoice_data)
function buildInvoiceHTML(d){
  const shop    = d.shop    || {};
  const meta    = d.meta    || {};
  const cust    = d.customer|| {};
  const items   = d.items   || [];
  const summary = d.summary || {};
 
  const logoHTML = shop.logo_url
    ? `<img src="${shop.logo_url}" class="inv-logo" alt="logo">`
    : `<div class="inv-logo-placeholder"><i class="fas fa-store"></i></div>`;
 
  // Shop phones
  const phones = [shop.phone_1, shop.phone_2].filter(Boolean).join('  |  ');
 
  // Items rows
  let sumQty = 0, sumAmt = 0;
  const itemRows = items.map((it, i) => {
    const qty = parseFloat(it.qty || 0);
    const amt = parseFloat(it.total || 0);
    sumQty += qty;
    sumAmt += amt;
    return `
      <tr>
        <td class="text-center">${i+1}</td>
        <td>${it.name || ''}</td>
        <td class="text-right">${_fmtQty(qty)}</td>
        <td>${it.sale_units || ''}</td>
        <td class="text-right">${_fmtMoney(it.price)}</td>
        <td class="text-right"><strong>${_fmtMoney(amt)}</strong></td>
      </tr>`;
  }).join('');
 
  // Summary rows
  const disc      = parseFloat(summary.discount  || 0);
  const transport = parseFloat(summary.transport || 0);
  const other     = parseFloat(summary.other     || 0);
  const tax       = parseFloat(summary.tax_amount|| 0);
  const taxPct    = parseFloat(summary.tax       || 0);
  const previous  = parseFloat(summary.previous  || 0);
  const paid      = parseFloat(summary.paid      || 0);
  const balance   = parseFloat(summary.change    || 0);
  const total     = parseFloat(summary.total     || 0);
 
  let summaryRows = `
    <tr><td>Sub Total</td><td>${_fmtMoney(summary.subtotal)}</td></tr>`;
  if (disc      > 0) summaryRows += `<tr><td>Discount</td><td>${_fmtMoney(disc)}</td></tr>`;
  if (transport > 0) summaryRows += `<tr><td>Transport</td><td>${_fmtMoney(transport)}</td></tr>`;
  if (other     > 0) summaryRows += `<tr><td>Other</td><td>${_fmtMoney(other)}</td></tr>`;
  if (tax       > 0) summaryRows += `<tr><td>Tax (${taxPct}%)</td><td>${_fmtMoney(tax)}</td></tr>`;
  if (previous  > 0) summaryRows += `<tr><td>Previous</td><td>${_fmtMoney(previous)}</td></tr>`;
  summaryRows += `<tr class="inv-total-row"><td>Total</td><td>${_fmtMoney(total)}</td></tr>`;
  summaryRows += `<tr><td>Received</td><td>${_fmtMoney(paid)}</td></tr>`;
  summaryRows += `<tr><td>Balance</td><td>${_fmtMoney(balance)}</td></tr>`;
 
  // Booker/Area
  const bookerArea = (meta.booker || meta.area)
    ? `<div class="inv-cust-addr">Booker: ${meta.booker||'—'} / Area: ${meta.area||'—'}</div>`
    : '';
 
  // Remarks
  const remarks = (summary.remarks && String(summary.remarks).length > 2)
    ? `<div class="inv-remarks"><i class="fas fa-comment-alt mr-1"></i>${summary.remarks}</div>`
    : '';
 
  return `
  <div class="inv-sheet">
    <!-- ── Shop Header ── -->
    <div class="d-flex justify-content-between align-items-start mb-2">
      <div>
        <div class="inv-shop-name">${shop.name || ''}</div>
        <div class="inv-shop-meta">${shop.address || ''}</div>
        <div class="inv-shop-meta">${phones}</div>
      </div>
      ${logoHTML}
    </div>
 
    <hr class="inv-divider">
    <div class="inv-title">INVOICE</div>
 
    <!-- ── Bill To + Meta ── -->
    <div class="inv-meta-grid">
      <div class="inv-meta-left">
        <div class="small text-muted mb-1">Bill To</div>
        <div class="inv-cust-name">${cust.name || 'Cash Sale'}</div>
        <div class="inv-cust-addr">${cust.address || ''}</div>
        <div class="inv-cust-addr">${cust.phone || ''}</div>
        ${bookerArea}
      </div>
      <div class="inv-meta-right">
        <table>
          <tr><td>Invoice No.</td><td>${meta.invoice_no || ''}</td></tr>
          <tr><td>Date</td><td>${meta.date || ''}</td></tr>
          ${meta.time ? `<tr><td>Time</td><td>${meta.time}</td></tr>` : ''}
        </table>
      </div>
    </div>
 
    <!-- ── Items Table ── -->
    <table class="inv-items-table">
      <thead>
        <tr>
          <th class="text-center">#</th>
          <th>Item Name</th>
          <th class="text-right">Qty</th>
          <th>Unit</th>
          <th class="text-right">Price</th>
          <th class="text-right">Amount</th>
        </tr>
      </thead>
      <tbody>${itemRows}</tbody>
      <tfoot>
        <tr>
          <td colspan="2"><strong>Total</strong></td>
          <td class="text-right"><strong>${_fmtQty(sumQty)}</strong></td>
          <td colspan="2"></td>
          <td class="text-right"><strong>${_fmtMoney(sumAmt)}</strong></td>
        </tr>
      </tfoot>
    </table>
 
    <!-- ── Summary ── -->
    <div class="inv-summary">
      <table class="inv-summary-table">
        ${summaryRows}
      </table>
    </div>
 
    ${remarks}
  </div>`;
}
 
// ── Double-click handler ──────────────────────────────────────────────────
let _idmCurrentInvNo = null;
 
$(document).on('dblclick', '#dataTable tbody tr', function(){
  const $row     = $(this);
  const invNo    = ($row.find('td:eq(1) .inv-no').text() || $row.find('td:eq(1)').text()).trim();  // Invoice # column
  const custName = $row.find('td:eq(4)').text().trim();   // Customer column
  const invDate  = $row.find('td:eq(2)').text().trim();   // Date column
 
  if (!invNo) return;
  _idmCurrentInvNo = invNo;
 
  // Update modal header
  $('#idm-inv-no-title').text('#' + invNo);
  $('#idm-inv-no-badge').text('#' + invNo);
 
  // Reset body to loading
  $('#idm-body').html(`
    <div class="inv-skeleton">
      <i class="fas fa-spinner fa-spin fa-2x text-primary"></i>
      <p class="mt-2 small">Loading invoice #${invNo}…</p>
    </div>`);
  $('#idm-action-bar').hide();
 
  // Set button URLs (edit/delete same as table buttons)
  $('#idm-btn-edit').attr('href',   "{% url 'sales:sales_edit' 0 %}".replace('/0/', '/' + invNo + '/'));
  $('#idm-btn-delete').attr('href', "{% url 'sales:sales_delete' 0 %}".replace('/0/', '/' + invNo + '/'));
 
  // Show modal immediately, fetch data async
  $('#invoiceDetailModal').modal('show');
 
  // Fetch invoice detail
  fetch(`/sales/ajax/invoice-detail/${invNo}/`, {
    credentials: 'same-origin',
    headers: { 'X-Requested-With': 'XMLHttpRequest' }
  })
  .then(r => {
    if (!r.ok) throw new Error('HTTP ' + r.status);
    return r.json();
  })
  .then(data => {
    if (data.error) throw new Error(data.error);
    $('#idm-body').html(buildInvoiceHTML(data));
    $('#idm-action-bar').show();
  })
  .catch(err => {
    $('#idm-body').html(`
      <div class="inv-skeleton">
        <i class="fas fa-exclamation-circle fa-2x text-danger"></i>
        <p class="mt-2 small text-danger">Failed to load invoice: ${err.message}</p>
      </div>`);
  });
});
 
// ── Reprint button → opens receiptModal ──────────────────────────────────
$('#idm-btn-reprint').on('click', function(){
  const invNo = _idmCurrentInvNo;
  if (!invNo) return;
  // Close detail modal, open receipt/reprint modal
  $('#invoiceDetailModal').modal('hide');
  setTimeout(function(){
    $('#rm_invoice_no').val(invNo);
    $('#rm_selected_template, #rm_selected_shop').val('');
    showTemplateStep();
    $('#rm_action_group .action-pill').removeClass('active');
    $('#rm_action_group .action-pill[data-action="pdf"]').addClass('active');
    $('#receiptModal').modal('show');
  }, 350);  // wait for detail modal to close
});
 
// ── Prevent row double-click from triggering single-click events ──────────
$(document).on('click', '#dataTable tbody tr', function(e){
  // only block if it's part of a dblclick — dblclick handler handles it
  // (do NOT prevent default here; action buttons inside td still need to work)
});


$(function () {
  let HD = { invoice: null, tx: 'sale' };
  const TXMAP = { sale: 2, return: 3 };

  $(document).on('click', '.js-edit-btn', function (e) {
    if (String($(this).data('hold')) !== '1') return;   // normal -> default link
    if (String($(this).data('cash')) === '1') return;   // CASH hold -> seedha edit (no popup)
    e.preventDefault();
    e.preventDefault();
    HD.invoice = $(this).data('invoice');
    HD.tx = $(this).data('tx') || 'sale';
    $('#hdEditBtn').attr('href', $(this).attr('href'));
    $('#holdDecisionModal').modal('show');
  });

  $('#hdIssueBtn').on('click', function () {
    $('#holdDecisionModal').modal('hide');
    const txn = TXMAP[HD.tx] || 2;
    $('#holdIssueModalBody').html('<div class="text-center text-muted py-4">Loading…</div>');
    $('#holdIssueModal').modal('show');
    $.get("{% url 'sales:hold_issue_form' 0 %}".replace('/0/', '/' + HD.invoice + '/'), { tx: txn })
      .done(html => $('#holdIssueModalBody').html(html))
      .fail(() => $('#holdIssueModalBody').html('<div class="alert alert-danger">Load failed.</div>'));
  });

  $(document).on('click', '#holdIssueFillAll', function () {
    $('#holdIssueBody tr[data-lineuid]').each(function () {
      const rem = parseFloat($(this).data('remaining')) || 0;
      $(this).find('.issue-qty').val(rem > 0 ? rem : 0);
    });
  });

  $(document).on('click', '#holdIssueSaveBtn', function () {
    const $b = $('#holdIssueBody'), invoice = $b.data('invoice'), txn = $b.data('txn');
    const items = [];
    $b.find('tr[data-lineuid]').each(function () {
      const q = parseFloat($(this).find('.issue-qty').val()) || 0;
      if (q > 0) items.push({ line_uid: $(this).data('lineuid'), qty: q });
    });
    if (!items.length) { Swal.fire('Ruko', 'Koi quantity nahi di.', 'info'); return; }
    const $btn = $(this).prop('disabled', true);
    $.ajax({
      url: "{% url 'sales:hold_issue_save' 0 %}".replace('/0/', '/' + invoice + '/'),
      method: 'POST', contentType: 'application/json',
      headers: { 'X-CSRFToken': getCookie('csrftoken') },
      data: JSON.stringify({ txn_type: txn, issue_date: $('#hold_issue_date').val(),
                             remarks: $('#hold_issue_remarks').val(), items })
    }).done(res => {
      if (res && res.ok) {
        Swal.fire({ icon:'success',
          title: res.fully_issued ? 'Poora issue ho gaya — invoice complete' : 'Issue ho gaya',
          timer: 1400, showConfirmButton: false }).then(() => location.reload());
      } else { $btn.prop('disabled', false); Swal.fire('Error', (res && res.error) || 'Save failed', 'error'); }
    }).fail(xhr => {
      $btn.prop('disabled', false);
      let m = 'Save failed'; try { m = JSON.parse(xhr.responseText).error || m; } catch (e) {}
      Swal.fire('Error', m, 'error');
    });
  });

  function getCookie(name) {
    let v = null;
    document.cookie.split(';').forEach(c => { c = c.trim();
      if (c.startsWith(name + '=')) v = decodeURIComponent(c.slice(name.length + 1)); });
    return v;
  }
});


$(function () {
  // Per-batch issue challan (issue-form history ke buttons)
  $(document).on('click', '.challan-print', function () {
    const inv   = $(this).data('invoice');
    const txn   = $(this).data('txn') || 2;
    const issue = $(this).data('issue');
    const size  = $(this).data('size') || 'a4';
    let url = "{% url 'sales:delivery_note' 0 %}".replace('/0/', '/' + inv + '/')
            + '?tx=' + txn + '&size=' + size + (issue ? ('&issue=' + issue) : '');
    window.open(url, '_blank');
  });

  // Full delivery challan (invoice-detail modal)
  $(document).on('click', '.idm-challan', function (e) {
    e.preventDefault();
    const inv = (typeof _idmCurrentInvNo !== 'undefined') ? _idmCurrentInvNo : null;
    if (!inv) return;
    const size = $(this).data('size') || 'a4';
    let url = "{% url 'sales:delivery_note' 0 %}".replace('/0/', '/' + inv + '/')
            + '?tx=2&size=' + size;
    window.open(url, '_blank');
  });
});
// ── FBR Repost ──────────────────────────────────────────────────────────
  $(document).on('click', '.btn-fbr-repost', function () {
    const invNo = $(this).data('invoice');
    const $btn  = $(this);
    if (!confirm(`Invoice #${invNo} ko FBR par dobara post karen?`)) return;

    $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');

    $.ajax({
      url:  `/sales/fbr-repost/${invNo}/`,
      type: 'POST',
      headers: { 'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val() || '{{ csrf_token }}' },
      success: function (res) {
        if (res.ok) {
          $btn.closest('tr').find('td').eq(-2)
              .html(`<small class="text-success" style="font-size:.65rem;">`
                  + `<i class="fas fa-check-circle mr-1"></i>${res.fiscal_no.substring(0,20)}</small>`);
          $btn.remove();
          Swal.fire({ icon: 'success', title: 'FBR Success!', text: res.fiscal_no, timer: 3000 });
        } else {
          $btn.prop('disabled', false).html('<i class="fas fa-cloud-upload-alt"></i>');
          Swal.fire({ icon: 'error', title: 'FBR Failed', text: res.error });
        }
      },
      error: function () {
        $btn.prop('disabled', false).html('<i class="fas fa-cloud-upload-alt"></i>');
        Swal.fire({ icon: 'error', title: 'Error', text: 'Network error' });
      }
    });
  });

</script>
{% endblock %}